<template>
  <div class="commodity">
   <!-- 头部标题 -->
    <div class="head_tit">
    <img @click="returns" class="tit_fl_img" src="../assets/myImg/back@2x.png" alt />
      <div class="tit_fl" @click="goSearch">
        <img class="tit_fr_img" src="../assets/img/search@2x.png" alt />
      </div>
      <span>商品链接</span>
    </div>
    <!-- banner图 -->
    <div class="head_banner">
      <img :src="commBanner" alt />
    </div>

    <!-- 下方内容区 -->
    <div class="comm_cen">
      <!-- 上方导航 -->
      <div class="product_list">
        <ul class="product_item">
          <li v-for="item in courseList"  @click="classDetail(item.course_id)" :key="item.course_id">{{item.course_name}}</li>
        </ul>
        <div class="selection">
          <img src="../assets/myImg/up@2x.png" alt />
          <img src="../assets/myImg/down@2x.png" alt />
        </div>
      </div>
      <!-- 下方内容 -->
      <ul class="comm_list">
        <li class="comm_item">
          <h1 class="comm_tit">抖音干货！5道例题吃透</h1>
          <p class="comm_url">https://haohuo.jinritemai.com/views/produ ct/item2?id=341553359</p>
          <p class="comm_xl">
            <span>月销量:1.5w</span>
            <span>价格:24.90</span>
            <span>佣金:1.55</span>
            <span>比例:25%</span>
          </p>
          <div class="comm_deta">
            <div class="comm_bq">
              <span>网红产品</span>
              <span>味道好</span>
              <span>减肥必备</span>
            </div>
            <span class="comm_link">进入小店</span>
          </div>
          <!-- 复制按钮 -->
          <div class="dup_btn">
            <span>复制</span>
          </div>
        </li> 
      </ul>
    </div>
 
  </div>
</template>

<script>
import axios from "axios";
import { getBanner, getCourseList } from "../api/commLink"; 

export default {
  components: { 
  },
  name: "CommLink",
  data() {
    return {
      commBanner: "",
      courseList: "",
    };
  },
  methods: {
    // 前往搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },
     // 点击返回上一页
    returns(){
      this.$router.go(-1)  
    },
    // 点击获取下方详情链接
    classDetail(id){
      console.log(id);
    }
  },
  mounted() {
    // 批量获取数据
    axios.all([getBanner('商品'), getCourseList(3)]).then(
      axios.spread((res, city) => {
        if (res.code == 200 && city.code == 200) {
          this.commBanner = res.data;
          this.courseList = city.data;
        }
      })
    );
  },
};
</script>

<style lang="less" scoped>
.commodity {
  margin: 0 0.373333rem;
}

.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    right: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    background: #eaeaea;
    border-radius: 50%;
    .tit_fr_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
  .tit_fl_img{ 
     position: absolute; 
     top: .4rem;
     left: 0; 
     width: .426667rem;
     height: .426667rem;
  }
}

// 轮播图
.head_banner {
  height: 3.813333rem;
}

// 下方内容区
.comm_cen {
  .product_list {
    position: relative;
    display: flex;
    height: 1.84rem;
    line-height: 1.84rem;
    border-bottom: 0.16rem solid #f9f9f9;
    span {
      font-size: 0.506667rem;
      color: #647cfa;
      font-weight: 700;
    }
    .product_item { 
      font-size: 0.4rem;
      color: #333333; 
      li {
        float: left;
        height: 100%;
        padding: 0 .266667rem;
        text-align: center;
      }
    }
    .product_img {
      position: absolute;
      right: 1.333333rem;
      top: 0.32rem;
      width: 0.36rem;
      height: 1.066667rem;
    }
    .selection {
      position: absolute;
      right: 0;
      padding-top: 0.666667rem;
      width: 0.213333rem;
      // height: 1.333333rem;
      line-height: 0;
      img {
        width: 0.213333rem;
        height: 0.213333rem;
      }
    }
  }
  .comm_list {
    padding: 0.4rem 0;
    .comm_item {
      margin-bottom: 0.4rem;
      position: relative;
      padding: 0 0.373333rem;
      height: 4.453333rem;
      overflow: hidden;
      border: 0.013333rem solid #eee;
      border-radius: 0.2rem;
      .comm_tit {
        margin: 0.373333rem 0;
        font-size: 0.453333rem;
        color: #333;
      }
      .comm_url {
        margin-bottom: 0.52rem;
        width: 6.4rem;
        height: 0.866667rem;
        font-size: 0.32rem;
      }
      .comm_bq {
        margin-top: 0.4rem;
        width: 5.12rem;
        height: 0.586667rem;
        line-height: 0.586667rem;
        background: #647cfa;
        color: #fff;
        font-size: 0.266667rem;
        border-radius: 0.293333rem;
        text-align: center;
      }
      .comm_deta {
        display: flex;
        justify-content: space-between;
        line-height: 1.226667rem;
      }
      // 复制按钮
      .dup_btn {
        position: absolute;
        top: 1.6rem;
        right: 0.586667rem;
        width: 1.066667rem;
        height: 0.586667rem;
        line-height: 0.586667rem;
        text-align: center;
        color: #fff;
        background: #ff6801;
        border-radius: 0.293333rem;
      }
    }
  }
}
</style>